<!-- Button to Open the Modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#modal-shopping-cart"
>
  <i class="now-ui-icons shopping_cart-simple"></i>
  (<span ng-bind="$ctrl.cartData.totalItem"></span>)
</button>
<div class="modal" id="modal-shopping-cart">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <form ng-class="{'submitted': submitted}" ng-submit="$ctrl.book()">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Shopping Cart</h4>
          <button type="button" class="close" data-bs-dismiss="modal">
            &times;
          </button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="col-12">
            <ul>
              <li
                class="row cart-item"
                ng-repeat="item in $ctrl.cartData.items"
              >
                <div class="col-sm-2">
                  <img
                    height="50"
                    width="auto"
                    ng-if="item.imageUrl"
                    src="{{item.imageUrl}}"
                  />
                </div>
                <span class="col-sm-5" ng-bind="item.title"></span>
                <input
                  type="number"
                  class="form-control-sm col-sm-1"
                  ng-change="$ctrl.calculate()"
                  ng-model="item.quantity"
                />
                <span
                  class="col-sm-3 text-end"
                  ng-bind="item.price | money"
                ></span>
                <a
                  class="col-sm-1 text-danger"
                  ng-click="$ctrl.removeItem($index)"
                  >X</a
                >
              </li>
              <li class="row">
                <span class="col-sm-8 text-end">Total: </span>
                <span
                  class="col-sm-3 text-end"
                  ng-bind="$ctrl.cartData.total | money"
                ></span>
              </li>
            </ul>
          </div>
          <div class="col-12">
            <h4>Info</h4>
            <div class="mb-3">
              <input
                class="form-control"
                required
                type="text"
                ng-model="$ctrl.order.name"
                placeholder="Name"
              />
            </div>
            <div class="mb-3">
              <input
                class="form-control"
                required
                type="email"
                ng-model="$ctrl.order.email"
                placeholder="Email"
              />
            </div>
            <div class="mb-3">
              <input
                class="form-control"
                required
                type="text"
                ng-model="$ctrl.order.phone"
                placeholder="Phone"
              />
            </div>
            <div class="mb-3">
              <textarea
                class="form-control"
                ng-model="$ctrl.order.message"
                placeholder="message"
              ></textarea>
            </div>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
            Close
          </button>
          <button
            type="button"
            ng-click="$ctrl.book()"
            class="btn btn-primary"
            style="color: white"
          >
            Submit
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
